<template>  
    <div class="cell">
         <slot name="title">
            <span class='title'>{{title}}</span>
         </slot>
         <slot>
            <el-switch
                v-model="switchValue"
                size="large"
            />
         </slot>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    modelValue: { // 使用标准v-model命名
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['update:modelValue']);

// 使用computed实现双向绑定
const switchValue = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    }
});
</script>

<style scoped lang="scss">
.cell{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px;
    .title{
        font-size: 15px;
        color: #666;
    }
}
</style>
  